<template>
  <div class="question-footer">
    <div
      class="collect action nav"
      @click="toggleCollect"
    >
      {{ isCollected ? '已' : '' }}收藏
      <img
        :src="isCollected ? collectedIcon : collectIcon"
        class="icon"
      >
    </div>
    <div class="sep" />
    <div
      class="corrective action nav"
      @click="feedbackCorrection"
    >
      纠错
      <img
        src="~assets/exam/feedback.png"
        class="icon"
      >
    </div>
    <div class="sep" />
    <div
      class="prev qnav nav"
      :class="{disabled: !canGoPrev}"
      @click="goPrev"
    >
      <van-icon name="arrow-left" />上一题
    </div>
    <div class="sep" />
    <div
      class="next qnav nav"
      :class="{disabled: !canGoNext}"
      @click="goNext"
    >
      下一题<van-icon name="arrow" />
    </div>
  </div>
</template>

<script lang="ts">
import questionRemoveCollect from '@/mixins/questionRemoveCollect'
import mixins from 'vue-typed-mixins'
export default mixins(questionRemoveCollect).extend({
  // props: {
  //   question: {
  //     type: Object,
  //     default: () => ({}),
  //   },
  //   index: {
  //     type: Number,
  //     default: 0,
  //   },
  //   qlength: {
  //     type: Number,
  //     default: 0,
  //   },
  // },
  computed: {
    canGoPrev () {
      if (this.index === 0) {
        return false
      }
      const limitNum = this.$store.state.instInfo.TryQuestionCount
      if (limitNum === -1 ||
        this.$store.state.userInfo.UserId !== '-1') {
        return true
      }
      if (limitNum + 1 >= this.question.Sequence) {
        return true
      }
      return false
    },
    canGoNext () {
      if (this.index + 1 === this.qlength) {
        return false
      }
      const limitNum = this.$store.state.instInfo.TryQuestionCount
      // TODO: 需要改为userInfo.UserId !== '-1'
      if (limitNum === -1 ||
        this.$store.state.userInfo.UserId !== '-1') {
        return true
      }
      if (limitNum - (this.$store.state.question.RightCount || 0) >= this.question.Sequence) {
        return true
      }
      return false
    },
  },
  data () {
    return {
      // showCollectBtn: AppInfo.isApp,
      collectIcon: require('assets/exam/collect.png'),
      collectedIcon: require('assets/exam/collected.png'),
    }
  },
  methods: {
    goPrev () {
      if (this.canGoPrev) {
        this.$emit('goPrev')
      }
    },
    goNext () {
      if (this.canGoNext) {
        this.$emit('goNext')
      }
    },
    goTestCard () {
      this.$emit('goTestCard')
    },
    feedbackCorrection () {
      this.$emit('feedbackCorrection')
    },
  },
})
</script>

<style lang="scss" scoped>
.question-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: $examFooterInH5;
  font-size: 32px;
  background: #fff;
  @include px1border(top, #D9D9D9);
  .van-icon {
    vertical-align: middle;
  }
}
.nav {
  flex: 1;
  height: $examFooterInH5;
  line-height: $examFooterInH5;
  text-align: center;
  position: relative;
  @include active;
}
.sep {
  width: 1px;
  height: 66px;
  // background: #D9D9D9;
  @include px1border(left, #D9D9D9);
}
.qnav {
  color: $primary-web;
}
.disabled {
  color: #999;
}
.collect {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F78601;
}
.corrective {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1296db;
}
.icon {
  display: block;
  height: 32px;
  margin-left: 15px;
}
</style>
